<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import * as Card from '$lib/components/ui/card';
	import { Badge } from '$lib/components/ui/badge';
	import * as Alert from '$lib/components/ui/alert';
	import { Switch } from '$lib/components/ui/switch';
	import { Snippet } from '$lib/components/ui/snippet';
	import Trash2Icon from '@lucide/svelte/icons/trash-2';
	import PlusIcon from '@lucide/svelte/icons/plus';
	import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
	import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
	import GlobeIcon from '@lucide/svelte/icons/globe';
	import UsersIcon from '@lucide/svelte/icons/users';
	import { m } from '$lib/paraglide/messages';
	import type { TemplateRegistry } from '$lib/types/template.type';

	let {
		registries,
		isLoading,
		onAddRegistry,
		onUpdateRegistry,
		onRemoveRegistry
	}: {
		registries: TemplateRegistry[];
		isLoading: {
			updating: Record<string, boolean>;
			removing: Record<string, boolean>;
		};
		onAddRegistry: () => void;
		onUpdateRegistry: (id: string, updates: { enabled?: boolean }) => void;
		onRemoveRegistry: (id: string) => void;
	} = $props();
</script>

<div class="space-y-6">
	<div class="flex items-center justify-between">
		<div>
			<h3 class="text-lg font-semibold">{m.templates_registries_section_title()}</h3>
			<p class="text-muted-foreground text-sm">{m.templates_registries_section_description()}</p>
		</div>
		<Button onclick={onAddRegistry}>
			<PlusIcon class="mr-2 size-4" />
			{m.common_add_button({ resource: m.resource_registry_cap() })}
		</Button>
	</div>

	{#if registries.length === 0}
		<div class="space-y-4">
			<Alert.Root>
				<GlobeIcon class="size-4" />
				<Alert.Title>{m.templates_alert_remote_registries_title()}</Alert.Title>
				<Alert.Description>{m.templates_alert_remote_registries_description()}</Alert.Description>
			</Alert.Root>

			<Alert.Root class="border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950">
				<UsersIcon class="size-4" />
				<Alert.Title>{m.templates_community_registry_title()}</Alert.Title>
				<Alert.Description class="space-y-2">
					<p>{m.templates_community_registry_description()}</p>
					<div class="flex w-full max-w-[475px] flex-col gap-2">
						<Snippet text="https://registry.getarcane.app/registry.json" />
					</div>
				</Alert.Description>
			</Alert.Root>
		</div>
	{:else}
		<div class="space-y-3">
			{#each registries as registry}
				<Card.Root class="p-4">
					<div class="flex items-center justify-between">
						<div class="flex-1">
							<div class="mb-1 flex items-center gap-2">
								<h4 class="font-medium">{registry.name}</h4>
								<Badge variant={registry.enabled ? 'default' : 'secondary'}>
									{registry.enabled ? m.common_enabled() : m.common_disabled()}
								</Badge>
							</div>
							<p class="text-muted-foreground text-sm break-all">{registry.url}</p>
							{#if registry.description}
								<p class="text-muted-foreground mt-1 text-sm">{registry.description}</p>
							{/if}
						</div>
						<div class="flex items-center gap-2">
							<Switch
								checked={registry.enabled}
								onCheckedChange={(checked) => onUpdateRegistry(registry.id, { enabled: checked })}
								disabled={isLoading.updating[registry.id]}
							/>

							<Button variant="outline" size="sm" onclick={() => window.open(registry.url, '_blank', 'noopener,noreferrer')}>
								<ExternalLinkIcon class="size-4" />
							</Button>

							<Button
								variant="destructive"
								size="sm"
								onclick={() => onRemoveRegistry(registry.id)}
								disabled={isLoading.removing[registry.id]}
							>
								{#if isLoading.removing[registry.id]}
									<RefreshCwIcon class="size-4 animate-spin" />
								{:else}
									<Trash2Icon class="size-4" />
								{/if}
							</Button>
						</div>
					</div>
				</Card.Root>
			{/each}
		</div>
	{/if}
</div>
